<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>系统添加</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}"/>
</head>
<body>
    <form class="layui-form" th:action="@{/system/add}" method="post" style="margin-top: 15px">
        <div class="layui-form-item">
            <label class="layui-form-label">系统编号</label>
            <div class="layui-input-inline">
                <input type="text" name="systemCode" required="required"  lay-verify="required" placeholder="请输入系统编号" autocomplete="off" class="layui-input"/>
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">系统名称</label>
            <div class="layui-input-inline">
                <input type="text" name="systemName" required="required"  lay-verify="required" placeholder="请输入系统名称" autocomplete="off" class="layui-input"/>
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">系统RUL</label>
            <div class="layui-input-inline">
                <input type="text" name="systemUrl" required="required"  lay-verify="required" placeholder="请输入URL" autocomplete="off" class="layui-input"/>
            </div>

        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">排序号</label>
            <div class="layui-input-inline">
                <input type="text" name="systemIndex" required="required" lay-verify="required|number" placeholder="请输入排序号" autocomplete="off" class="layui-input"/>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <input type="hidden" name="photoId" id="photoId">

            <div class="layui-input-inline">
                <div class="layui-upload-drag" id="file_upload">

                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="lay-submit" lay-filter="formUser">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</body>
<script th:src="@{/static/layui/layui.all.js}"></script>
<script type="text/javascript" th:inline="javascript">

    // <![CDATA[
    var ctxPath = /*[[@{/}]]*/ '';
    layui.use(['form','upload'], function(){
        var form = layui.form,upload = layui.upload,$ = layui.$;
        var index = parent.layer.getFrameIndex(window.name);

        //监听提交
        form.on('submit(formUser)', function(data){
            if($('#photoId').val().length === 0){
                layer.msg('请上传图片');
                return false;
            }
            layui.$.post({
                url:ctxPath + 'system/add',
                data:data.field,
                success:function (res) {
                    if(res.status){
                        layui.$.get({
                            url:ctxPath + 'system/toPageList',
                            success:function () {
                                parent.layer.close(index);
                            }
                        });
                    }else {
                        layer.msg(JSON.stringify(data.message));
                    }
                }
            });
            return false;
        });

        var photoHtml = '<i class="layui-icon"></i>' +
                        '<p>点击上传，或将文件拖拽到此处</p>' +
                        '</div>';

        $('#file_upload').html(photoHtml);
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#file_upload',
            url: ctxPath + 'file/upload',
            multiple : true,
            before: function(obj){
            //预读本地文件示例，不支持ie8
            obj.preview(function(index, file, result){
                var imageHtml = '<img class="layui-upload-img" style="width:150px;height:150px;" src="' + result + '"/>';
                $('#file_upload').html(imageHtml); //图片链接（base64）
            });
            },
            done: function(res){
                if(res.status){
                    $('#photoId').val(res.data.id);
                }else{
                    layer.msg('文件上传失败' + res.message, {icon: 2});
                }
            }
        });

    });

    // ]]>
</script>
</html>